<template>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
// import option from './option.js';
import generateOption from './option.js';
import * as echarts from 'echarts'
import axios from 'axios';

export default {
    data() { 
        return {
            chartInstance2: null,
            resizeObserver: null,
            loading: false,
            volumeData: [
                { name: "捕捞量(吨)", data: [0, 0, 0, 0] },
                { name: "运输量(吨)", data: [0, 0, 0, 0] },
            ],
            companyNames: ["开创", "新吉", "宁泰", "丰汇"],
            companyDisplayNames: ["开创", "新吉", "宁泰", "丰汇"]
        };
    },
    computed: {
        volumeDetailData() {
            return this.volumeData;
        }
    },
    mounted() {
        this.fetchCatchVolumeData();
        if (this.$refs.chartContainer) {
            this.chartInstance2 = echarts.init(this.$refs.chartContainer, this.$echartsConfig.theme);
            this.updateChart();
            this.resizeObserver = new ResizeObserver(() => {
                this.chartInstance2 && this.chartInstance2.resize();
            });
            this.resizeObserver.observe(this.$refs.chartContainer);
        }
    },
    methods: {
        fetchCatchVolumeData() {
            this.loading = true;
            axios.get('/getdata/company-catch-volume/')
                .then(response => {
                    if (response.data.code === 200) {
                        const { volumeData, companyNames, companyDisplayNames } = response.data.data;
                        if (volumeData && volumeData.length) {
                            this.volumeData = volumeData;
                        }
                        if (companyNames && companyNames.length) {
                            this.companyNames = companyNames;
                        }
                        if (companyDisplayNames && companyDisplayNames.length) {
                            this.companyDisplayNames = companyDisplayNames;
                        }
                    } else {
                        console.error('获取捕捞量数据失败:', response.data.message);
                    }
                })
                .catch(error => {
                    console.error('获取捕捞量数据出错:', error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        updateChart() {
            const option = generateOption(this.volumeDetailData, this.companyDisplayNames, this.companyNames);
            this.chartInstance2 && this.chartInstance2.setOption(option, true);
        }
    },
    watch: {
        volumeDetailData: {
            deep: true,
            handler() {
                this.updateChart();
            }
        },
        companyNames: {
            handler() {
                this.updateChart();
            }
        },
        companyDisplayNames: {
            handler() {
                this.updateChart();
            }
        }
    },
    beforeDestroy() {
        if (this.chartInstance2) {
            this.chartInstance2.dispose();
        }
        if (this.resizeObserver && this.$refs.chartContainer) {
            this.resizeObserver.unobserve(this.$refs.chartContainer);
            this.resizeObserver.disconnect();
        }
    }
};
</script>
